<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <title>添加案件</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${contextPath}/resources/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h0EKj4yWH81COWhXGS4G7uyi"></script>
</head>
<body>
<div class="pageheader">
    <h2>添加案件</h2>
</div>
<div class="contentpanel">
    <div class="panel panel-default">
        <form:form commandName="formDto" cssClass="form-horizontal form-bordered"
                   action="${contextPath}/admin/cmc/case/edit.htm" method="post">
            <div class="form-group">
                <label class="col-sm-1 control-label ">经度</label>

                <div class="col-sm-5">
                    <form:input path="locationX" cssClass="form-control " id="map-lng" placeholder="经度"/>
                    <form:errors path="locationX" cssClass="error text-danger"/>
                </div>
                <label class="col-sm-1 control-label">纬度</label>

                <div class="col-sm-5">
                    <form:input path="locationY" cssClass="form-control " id="map-lat" placeholder="纬度"/>
                    <form:errors path="locationY" cssClass="error text-danger"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">地图选点</label>

                <div class="col-sm-11">
                    <div id="allmap" style="width:100%;height:400px;"></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">位置描述</label>

                <div class="col-sm-11">
                    <form:textarea path="addressDescription" cssClass="form-control" placeholder="位置的具体描述"/>
                    <form:errors path="addressDescription" cssClass="error text-danger"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">创建人</label>

                <div class="col-sm-11">
                    <form:hidden path="creatorUuid" id="creatorUuid"/>
                    <form:input path="creator.nickname" cssClass="form-control" autocomplete="false" id="search-input"
                                disabled="${not empty formDto.creatorUuid}" placeholder="请输入姓名搜索"/>

                    <form:errors path="creatorUuid" cssClass="error text-danger"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">联系电话</label>

                <div class="col-sm-11">
                    <form:input path="phone" cssClass="form-control"
                                placeholder="电话号码"/>
                    <form:errors path="phone" cssClass="error text-danger"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">举报图片</label>

                <div id="impageUploadWarp"></div>

                <div class="col-sm-11 parentGoodsImage">
                        <%--模板--%>
                    <div style="float:left;position:relative;width:210px;height:210px;border:1px solid #d0d0d0;
                    border-radius:5px;padding:5px;margin-bottom:10px;margin-right:10px;display:none"
                         class="ImageItemTemplate">
                        <input type="hidden" name="" value=""/>
                        <img src="" width="200px" height="200px" style="border-radius:5px;"/>
                        <button class="btn btn-primary btn-xs deleteImage" type="button"
                                style="position:absolute;bottom:3px;right:3px;">
                            <i class="fa fa-trash-o"></i> 删除
                        </button>
                    </div>

                    <c:forEach items="${formDto.imageList}" var="item" varStatus="imageList">
                        <div style="float:left;position:relative;width:210px;height:210px;border:1px solid #d0d0d0;
                            border-radius:5px;padding:5px;margin-bottom:10px;margin-right:10px;display:inline"
                             class="ImageItemTemplate">
                            <form:hidden path="imageList[${imageList.index}].uuid"/>
                            <form:hidden path="imageList[${imageList.index}].url"/>
                            <img src="${item.url}" width="200px" height="200px" style="border-radius:5px;"/>
                            <button class="btn btn-primary btn-xs deleteImage" type="button"
                                    style="position:absolute;bottom:3px;right:3px;">
                                <i class="fa fa-trash-o"></i> 删除
                            </button>
                        </div>
                    </c:forEach>
                    <form:errors path="imageList" cssClass="error text-danger"/>
                    <button class="btn btn-primary uploadImage" type="button">上传</button>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label"></label>

                <div class="col-sm-10">
                    <div class="content" id="content"></div>
                    <button type="submit" class="btn btn-primary">提交</button>
                    <a href="javascript:window.history.go(-1);" class="btn btn-default">取消</a>
                </div>
            </div>
        </form:form>
    </div>
</div>
<%--<script src="${contextPath}/resources/js/jquery-1.11.1.min.js"></script>--%>
<script type="text/javascript">
    var ue = UE.getEditor('impageUploadWarp');
    ue.ready(function () {
        //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
        ue.hide();
        //侦听图片上传
        ue.addListener('beforeInsertImage', function (t, arg) {
            for (var index in arg) {
                var lastItem = $(".ImageItemTemplate:first");
                var clone = lastItem.clone();
                clone.find("input").each(function () {
                    $(this).attr("name", "imageList[" + ($(".ImageItemTemplate").length - 1) + "].url")
                            .val(arg[index].src);
                });
                clone.find("path").val(arg[index].src);

                clone.find("img").attr("src", arg[index].src);
                clone.css("display", "inline");
                $(".ImageItemTemplate:last").after(clone);
            }
        });
    });

    $(function () {
        $(".contentpanel").on("click", ".uploadImage", function () {
            index = $(".uploadImage").index(this);
            var myImage = ue.getDialog("insertimage");
            myImage.open();
        });
        $(".contentpanel").on("click", ".deleteImage", function () {
            $(this).parents(".ImageItemTemplate").remove();
        });
    });

    $("input#search-input").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "${contextPath}/admin/wechat/member/find_member",
                dataType: "json",
                data: {
                    key: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.name,
                            value: item.name,
                            uuid: item.uuid
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            if (ui.item) {
                $("#creatorUuid").val(ui.item.uuid);
            }
        }
    });

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(104.072, 30.662), 12);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_SMALL
    });
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    map.addControl(top_right_navigation);
    //单击获取点击的经纬度
    map.addEventListener("click", function (e) {
        var maplng = e.point.lng;
        var maplat = e.point.lat;
        $("input#map-lng").val(maplng);
        $("input#map-lat").val(maplat);

        var point = new BMap.Point(maplng, maplat);
        var marker = new BMap.Marker(point);  // 创建标注
        map.clearOverlays();
        map.addOverlay(marker);               // 将标注添加到地图中
    });
</script>
</body>
</html>
